/*
 * JBoss, Home of Professional Open Source
 * Copyright 2014, Red Hat, Inc. and/or its affiliates, and individual
 * contributors by the @authors tag. See the copyright.txt in the
 * distribution for a full listing of individual contributors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/* Core styles for the page */
body {
    margin: 0;
    padding: 0;
    color: #363636;
    font-family: Verdana, sans-serif;
}

p {
    margin-left: 8px;
    margin-right: 8px;
}

a {
    color: #369;
    text-decoration: none;
}

code {
    font-size: 1.1em;
}

a:hover {
    color: #369;
    text-decoration: underline;
}

legend {
    color: #111111;
    font-weight: bold;
}

article > div.ui-content {
    /* Center the content */
    margin: 0 auto;
}

article .wrap {
    /* Set a background and border for the content to set it apart */
    background: #cccccc;
    border: 1px solid #aaaaaa;
    border-radius: 8px;
    /* Set padding so the edges are flush */
    padding: 1em;
}

.mobileicon {
    padding: 10px;
}

/* Header and footer styles */

.header_logo{
    float: left;
    margin-top: 3px;
    margin-left: 8px;
}

/* Member registration styles */
span.invalid {
    padding-left: 3px;
    color: red;
}

span.success {
   padding-left: 3px;
   color: green;
}

.member-foot {
    clear: both;
    height: 2em;
    font-weight: bold;
    padding-top: 3em;
}

#member-art .ui-content .ui-btn {
    float: right;
}

#refreshButton {
    margin-top: 4em;
}

/* Invert the color scheme for the persistent navbar to match iOS guidelines */
div[data-role="navbar"] a.ui-link.ui-btn-active {
    color: #3388cc;
    background-color: #fff;
    border-color: rgb(221,221,221);
}
div[data-role="navbar"] a.ui-link.ui-btn-active:after {
    color: #3388cc;
    background-color: #3388cc;
}

/* Decrease margins applied on headers */
.ui-header .ui-title {
    margin-left: 10%;
    margin-right: 10%;
}

.app-responsive .ui-block-a,
.app-responsive .ui-block-b,
.app-responsive .ui-block-c,
.app-responsive .ui-block-d,
.app-responsive .ui-block-e {
    width: 100%;
    float:none;
}

/* preset breakpoint to switch to stacked grid styles and responsive tables below 40em (640px) */
@media all and (min-width: 40em) {
    .app-responsive .ui-block-a,
    .app-responsive .ui-block-b,
    .app-responsive .ui-block-c,
    .app-responsive .ui-block-d,
    .app-responsive .ui-block-e {
        width: 49.95%;
        float:left;
    }

    /* Show the table header rows and set all cells to display: table-cell */
    .app-responsive td,
    .app-responsive th,
    .app-responsive tbody th,
    .app-responsive tbody td,
    .app-responsive thead td,
    .app-responsive thead th {
        display: table-cell;
        margin: 0;
        white-space: pre-wrap;
        word-break: break-all;
        word-break: break-word;
    }
    /* Hide the labels in each cell */
    .app-responsive td .ui-table-cell-label,
    .app-responsive th .ui-table-cell-label {
        display: none;
    }

    article > div.ui-content {
        /* Set a max-width */
        max-width: 38em;
    }
    article .wrap {
        /* Adding padding */
        padding: 1em;
    }
}

/* Set a larger max-width and add more padding as the display size increases. */
@media all and (min-width: 50em) {
    article > div.ui-content {
        /* Set a max-width */
        max-width: 46em;
    }
    article .wrap {
        /* Adding padding */
        padding: 2em;
    }
}

@media all and (min-width: 60em) {
    article > div.ui-content {
        /* Set a max-width */
        max-width: 54em;
    }
    article .wrap {
        /* Adding padding */
        padding: 3em;
    }
}
